<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getOrderList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getOrderList"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
    <!-- 用户列表(表格)区域 -->
    <el-table :data="orderList" border stripe>
      <el-table-column type="index" label="索引"></el-table-column>
      <el-table-column label="订单编号" prop="order_id"></el-table-column>
      <el-table-column label="订单书籍">
        <template slot-scope="scope">
          <img
            style="width:80px;height:120px;border:none;"
            :src="baseURL + scope.row.order_book_cover"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        label="订单书名"
        prop="order_book_name"
      ></el-table-column>
      <el-table-column label="卖家用户名" prop="order_seller"></el-table-column>
      <el-table-column label="收货人" prop="order_buyer"></el-table-column>
      <el-table-column label="购买数量" prop="order_num"></el-table-column>
      <el-table-column label="订单金额" prop="order_price"></el-table-column>
      <el-table-column label="下单时间" prop="order_date"></el-table-column>
      <el-table-column label="运送方式">快递</el-table-column>
      <el-table-column label="订单状态" prop="order_status"></el-table-column>
      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <!-- 查看订单详情 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="查看详情"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="primary"
              icon="el-icon-s-order"
              size="mini"
              @click="getOrderDetail(scope.row.order_id, scope.row.order_buyer)"
            ></el-button>
          </el-tooltip>
          <!-- 删除订单 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="删除订单"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteOrder(scope.row.order_id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="50%">
      <div class="order_detail_top">订单号:{{ order_detail.order_id }}</div>
      <div>
        <div class="order_detail_top">
          订单状态: {{ order_detail.order_status }}
        </div>
      </div>
      <div>
        <div class="order_detail_title">收货人信息</div>
        <div class="order_detail_box">
          <div>收货人:{{ buyer_detail.consignee }}</div>
          <div>手机:{{ buyer_detail.address_phone }}</div>
          <div>邮编:{{ buyer_detail.postcode }}</div>
          <div>所在省市区:{{ buyer_detail.province }}</div>
          <div>详细地址:{{ buyer_detail.address }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      // 搜索框绑定数据
      queryInfo: {
        query: '',
        pagenum: 1, // 当前的页数
        pagesize: 6 // 当前每页显示多少条数据
      },
      baseURL: 'http://127.0.0.1:3000/',
      // 总页数
      total: 3,
      // 订单信息
      orderList: [],
      detailDialogVisible: false,
      order_detail: {},
      buyer_detail: {}
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    async getOrderList() {
      const { data: res } = await this.$http.get('order/getOrder', {
        params: this.queryInfo
      })
      if (res.code !== 200) {
        return this.$message.error('获取订单列表失败')
      }
      console.log(res.data)
      this.orderList = res.data
      this.orderList.forEach(item => {
        switch (item.order_status) {
          case 0:
            item.order_status = '订单已取消'
            break
          case 1:
            item.order_status = '订单已提交,待卖家确认'
            break
          case 2:
            item.order_status = '卖家已确认订单,待付款'
            break
          case 3:
            item.order_status = '买家已付款,待卖家发货'
            break
          case 4:
            item.order_status = '卖家已发货,待买家确认收货'
            break
          case 5:
            item.order_status = '买家已确认收货'
            break
          case 6:
            item.order_status = '交易完成'
            break
        }
      })
    },
    // 查看订单详情
    async getOrderDetail(orderId, orderBuyer) {
      this.detailDialogVisible = true
      const { data: res } = await this.$http.get(
        '/order/getOrderById' + '/' + orderId
      )
      this.order_detail = res.data[0]
      switch (this.order_detail.order_status) {
        case 0:
          this.order_detail.order_status = '订单已取消'
          break
        case 1:
          this.order_detail.order_status = '订单已提交,待卖家确认'
          break
        case 2:
          this.order_detail.order_status = '卖家已确认订单,待付款'
          break
        case 3:
          this.order_detail.order_status = '买家已付款,待卖家发货'
          break
        case 4:
          this.order_detail.order_status = '卖家已发货,待买家确认收货'
          break
        case 5:
          this.order_detail.order_status = '买家已确认收货'
          break
        case 6:
          this.order_detail.order_status = '交易完成'
          break
      }
      console.log(this.order_detail)
      const { data: resBuyer } = await this.$http.get(
        '/address/getAddressByName' + '/' + orderBuyer
      )
      if (resBuyer.data[0] !== undefined) {
        this.buyer_detail = resBuyer.data[0]
        const arr = this.buyer_detail.province.split(',')
        const data =
          CodeToText[arr[0]] +
          ', ' +
          CodeToText[arr[1]] +
          ', ' +
          CodeToText[arr[2]]
        this.buyer_detail.province = data.replaceAll(',', '')
      }
      console.log(this.buyer_detail)
    },
    async deleteOrder(orderId) {
      const confirmResult = await this.$confirm('确定删除该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return this.$message.info('已取消删除')
      const { data: res } = await this.$http.post('order/deleteOrder', {
        order_id: orderId
      })
      if (res.code !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getOrderList()
    }
  }
}
</script>

<style lang="less" scoped>
// 订单详情
.order_detail_top {
  font-size: 18px;
}
.order_detail_title {
  font-size: 20px;
  margin: 10px 0 10px 2px;
  padding-left: 4px;
  font-weight: bold;
  border-left: 4px solid rgb(0, 128, 128);
}
.order_detail_box {
  padding: 10px;
  div {
    height: 25px;
    line-height: 25px;
  }
}
</style>
